/*
 * @Author: 老刘
 * @Date: 2020-04-29 15:51:38
 * @Description: 饼图
 */
import { initializationEcharts } from '../../../utils/util.js';
import * as echarts from '../../../utils/echarts';
Page({
	data: {
		transactionList: undefined,
		ec: {
			lazyLoad: true
		}
	},
	onShow () {
		// 请求数据,渲染图表
		this.echartsComponnet = this.selectComponent('#mychart-dom-pie');
		this.initEcharts();
		this.pieChartDistribute();
	},
	// 初始化图表
	initEcharts () {
		initializationEcharts(this.echartsComponnet, echarts, this.getOption());
	},
	// 模拟请求数据
	pieChartDistribute () {
		const res = {
			'message': '操作成功',
			'code': 0,
			'data': [
				{
					'proportion': 42,
					'name': '天津',
					'num': 400,
					'index': 1
				},
				{
					'proportion': 27,
					'name': '贵州',
					'num': 262,
					'index': 2
				},
				{
					'proportion': 22,
					'name': '总部',
					'num': 213,
					'index': 3
				},
				{
					'proportion': 6,
					'name': '河南',
					'num': 62,
					'index': 4
				},
				{
					'proportion': 1,
					'name': '内蒙古',
					'num': 7,
					'index': 5
				},
				{
					'proportion': 2,
					'name': '其它',
					'num': 12,
					'index': 6
				}
			]
		};
		let list = res.data;
		let transactionList = this.changeKey(list);
		this.setData({
			transactionList: transactionList
		});
		this.initEcharts();
	},
	changeKey (arr) {
		let newArr = [];
		arr.forEach((item) => {
			let newObj = {
				name: item.name,
				value: item.num
			};
			newArr.push(newObj);
		});
		console.log(newArr);
		return newArr;
	},
	// 获取数据
	getOption () {
		let that = this;
		let option = {
			title: {
				text: `饼状图标题`,
				left: 18,
				top: 18,
				textStyle: {
					color: '#33333D',
					fontSize: 14
				}
			},
			backgroundColor: '#F3F3F3',
			color: ['#1E4F7F', '#FA6400', '#F7B500', '#D40094', '#00A4FA', '#8700FA'],
			series: [{
				label: {
					show: true,
					position: 'outside', // 标签的位置 inner  outside
					textStyle: {
						fontWeight: 300 ,
						// color: '#66666D',
						fontSize: 12
					},
					formatter: '{b}{d}%'
				},
				hoverAnimation: false,
				type: 'pie',
				radius: [80, 100], // 第一个值控制空心圆大小 第二个值控制外圆大小
				center: ['50%', '54%'],
				fontSize: 12,
				data: this.data.transactionList
			}]
		};
		return option;
	}
});
